<template>
  <div class="content">
    <div class="title">标签</div>
    <div class="tags">
      <a v-for="tag in tags" :key="tag.id">
        <div class="tag" @click="click(tag.id)">{{tag.name}}</div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Tags",
  props: {
    tags: Array,
    thisTag: String
  },
  data() {
    return {
      tagHerf: "/tag/"
    }
  },
  methods: {
    click: function (tag) {
      this.$emit("upDateRouter", tag)
    }
  },
}
</script>

<style lang="stylus" scoped>
.content{
  margin-top 50px
  width 100%
  .title{
    font-size 12px
    text-transform uppercase
    letter-spacing 3.25px
    font-weight 500
  }
  .tags{
    margin-top 20px
    .tag{
      display inline-block
      font-size 10px
      letter-spacing 1px
      text-transform uppercase
      background #f2f2f2
      color #666
      padding 4px 7px
      margin 0 5px 8px 0
      border-radius 2px
      transform .3s
      cursor pointer
      &:hover{
        color #000
      }
    }
  }
}
</style>